<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="../../static/css/jpetstore.css"/>
    <meta charset="UTF-8">
    <title>All Goods</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>

<div th:replace="common/left">

</div>
<script type="text/javascript">
    function beforeSubmit_(){
        if(beforeSubmit()) document.addForm.submit();
    }

    function beforeSubmit(){
        var check = document.getElementById("hasFile").value;
        if (check == "no") {            //没有图片
            alert("Please upload one picture of this new product!");
            return false;
        } else {                               //有图片
            var descriptionText = document.getElementById("descriptionText").value;
            var productId = document.getElementById("productId").value;
            var name = document.getElementById("name").value;
            if(descriptionText=="" || productId=="" || name==""){
                alert("Please input all of the information before you submit!");
                return false;
            }
            else {
                return true;
            }
        }
    }

    //图片回显
    function preview(file) {
        $("#imgHidden").css("display", "none");
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
            var check = document.getElementById("hasFile");
            check.value = "yes";
            console.log("已读取图片");
        } else {
            prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
                file.value + '\'"></div>';
        }
    }
</script>


<div id="BackLink">
    <a href="/admin_catalog/admin_addGood">Return to Add</a>
</div>

<div id="bCatalog">
    <!--enctype:编码类型   multipart/form-data：不对字符编码，或在使用包含文件上传控件的表单时，必须使用该值-->
    <form action="/admin_catalog/addProduct" method="post" th:object="${newProduct}" enctype="multipart/form-data" name="addForm">

        <h3>Add New Product</h3>

        <table id="productform">
            <tr>
                <td>Category ID</td>
                <td>
                    <select th:field="*{categoryId}">
                        <option th:each="categoryId:${CATEGORY_LIST}" th:value="${categoryId}" th:text="${categoryId}">

                        </option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Product ID:</td>
                <td>
                    <input id="productId" type="text" onblur="checkProductId()" th:field="*{productId}" />
                </td>
                <span id="isExistInfo"></span>
            </tr>
            <tr>
                <td>name</td>
                <td>
                    <input id="name" type="text" th:field="*{name}" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="file" id="file" name="file" accept="image/*" onchange="preview(this)"/>
                    <div id="preview">
                        <img style="width: 100px; height: 100px;display:none" id="imgHidden"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>uploadImage</td>
                <td>
                    <input type="text" id="hasFile" th:contenteditable="false" value="no"/>
                </td>
            </tr>
            <tr>
                <td>descriptionText</td>
                <td>
                    <input id="descriptionText" type="text" style= "background-color:transparent;border:0;"
                           th:field="*{descriptionText}" />
                </td>
            </tr>

        </table>
        <a class="Button" href="javascript:location.reload()">Clear All</a>
        <br><br><br>
        <a class="Button" href="javascript:beforeSubmit_()">Save</a>


        <!--<input type="submit" name="addProduct" value="Add"/>-->

    </form>
    <script>
        var xhr;
        function checkProductId() {
            var productId = document.getElementById('productId').value;
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = process;
            xhr.open("GET","/admin/CheckProductId?productId="+productId,true);
            xhr.send(null);
        }
        function process(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var responseInfo = xhr.responseText;
                    var msg = document.getElementById('isExistInfo');
                    if(responseInfo == 'Not Exist'){
                        msg.innerText = 'This Id is available!';
                        msg.style.color = "green";

                    }else if(responseInfo == 'Exist'){
                        msg.innerText = 'Sorry,this id is used.';
                        msg.style.color = "red";


                    }
                }
            }
        }

    </script>

</div>
</body>
</html>